<template>
    <div class="wrap">
        <j-header :settings='header'></j-header>
        <transition :enter-active-class="enterClass"
                    :leave-active-class="leaveClass">
            <keep-alive>
                <router-view class="view-wrap"></router-view>
            </keep-alive>
        </transition>
        <j-footer :settings="footer"></j-footer>
    </div>
</template>
<script>
import JFooter from 'components/j-footer'
import JHeader from 'components/j-header'

import { mapState, mapActions } from 'vuex'
export default {
    components: {
        JHeader,
        JFooter,
    },
    computed: {
        ...mapState({
            enterAnimate: (state) => state.enterAnimate,
            leaveAnimate: (state) => state.leaveAnimate,
            header: (state) => state.header.header,
            footer: (state) => state.footer.footer,
        }),
        enterClass() {
            return `animated ${this.enterAnimate}`
        },
        leaveClass() {
            return `animated ${this.leaveAnimate}`
        }
    }
}
</script>
<style lang="less">
.wrap {
  .animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .view-wrap {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 45px;
  }
}
</style>

